<template>
  <div class="myCloud">
    <!-- <search-input v-model="searchValue"></search-input> -->
    <!-- <search-input v-model="searchValue"></search-input> -->
    <search-input
      :search="searchValue"
      @transferSearch="getSearch"
    ></search-input>
    <!-- 产品列表 -->
    <div class="cloudForm">
      <cloud-item
        v-for="(item, index) in productItem"
        :key="index"
        :productItem="item"
      ></cloud-item>
    </div>
    <!-- 底部 -->
    <div class="bottom">
      <cloud-bottom>
        <template v-slot:left>
          <span>已选择4件货物</span>
        </template>
        <template v-slot:right>
          <span @click="$router.push('/deliveryConfirmat')">立即提货</span>
        </template>
      </cloud-bottom>
    </div>
  </div>
</template>

<script>
import SearchInput from '@/components/SearchInput'
import cloudItem from '@/components/cloudItem'
import cloudBottom from '@/components/cloudBottom'
export default {
  name: 'myCloud',
  components: { SearchInput, cloudItem, cloudBottom },
  data() {
    return {
      searchValue: '',
      productItem: [
        {
          name: '私密产品私密产品私密产品私密产品私密产品私密产…',
          price: '342.00',
          radio: 1
          //   src: '../../assets/矩形 2.png',
        },
        {
          name: '私密产品私密产品私密产品私密产品私密产品私密产…',
          price: '342.00',
          radio: 1
        },
        {
          name: '私密产品私密产品私密产品私密产品私密产品私密产…',
          price: '342.00',
          radio: 1
        },
        {
          name: '私密产品私密产品私密产品私密产品私密产品私密产…',
          price: '342.00',
          radio: 1
          //   src: '../../assets/矩形 2.png',
        },
        {
          name: '私密产品私密产品私密产品私密产品私密产品私密产…',
          price: '342.00',
          radio: 0
        },
        {
          name: '私密产品私密产品私密产品私密产品私密产品私密产…',
          price: '342.00',
          radio: 0
        }
      ]
    }
  },
  methods: {
    getSearch(val) {
      this.searchValue = val
    }
  }
}
</script>

<style lang="less" scoped>
.myCloud {
  background: #f7f6fb;
  padding-top: 52px;
  padding-bottom: 50px;
  .cloudForm {
    padding: 12px;
  }
}
</style>
